<!DOCTYPE html>
<html>
<head>
	<title>SoundJS: Sound Tween</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/soundjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>
</head>

<body onload="init()">

<header  class="SoundJS">
	<h1>Sound Tween</h1>

	<p>This example shows how to tween volume and pan.</p>
</header>

<div class="content" id="content">
	<div>
		<a href="?type=normal">Web Audio with HTML Audio then Flash Fallbacks</a>
		| <a href="?type=html5">HTML Audio Only</a> | <a href="?type=flash">Flash Only</a>
	</div>

	<div class="plugin">
		<p id="activePlugin">Active Plugin is</p>
	</div>

	<p id="status">Startup.</p>

	<div><canvas id="testCanvas" width="932" height="320"></canvas></div>
</div>

<div id="error">
	<h2>Sorry!</h2>

	<p>SoundJS is not currently supported in your browser.</p>

	<p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
		with the device and browser you are using. Thank you.</p>
</div>

<div id="mobile">
	<h2>Sorry!</h2>

	<p>Mobile devices require sound to be played inside of user events, which
		this demo does not do.</p>

	<p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
		with the OS and browser if you see this on a device that is not mobile.
		Thank you.</p>
</div>

<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
<!-- note tweenjs needs easeljs ticker -->
<script type="text/javascript" src="../_assets/libs/tweenjs-NEXT.min.js"></script>

<script type="text/javascript" src="../lib/soundjs-NEXT.combined.js"></script>
<!-- Note: FlashAudioPlugin is only needed to support older browsers -->
<script type="text/javascript" src="../lib/flashaudioplugin-NEXT.combined.js"></script>

<!-- We also provide hosted minified versions of all CreateJS libraries.
	http://code.createjs.com -->

<script id="editable">
	// Read the URL Params. We need to do this to determine the plugin mode.
	var params = {};
	var pieces = window.location.search.slice(1).split("&");
	for (var i = 0, l = pieces.length; i < l; i++) {
		var parts = pieces[i].split("=");
		params[parts[0]] = parts[1];
	}

	var src;	            // the audio src we are trying to play
	var soundInstance; 		// the soundInstance returned by Sound when we create or play a src
	var displayStatus;  	// the HTML element we use to display messages to the user
	var canvas;				// canvas that easeljs stage is drawing to
	var stage;				// the easeljs stage
	var tween;				// the tween we are applying to audio
	var baseTime = 1000;	// the baseTime we use for tweening
	var volume, pan;		// 2 easeljs shapes to represent these values

	function init() {
		createjs.FlashAudioPlugin.swfPath = "../src/soundjs/flashaudio/" // Initialize the base path from this document to the Flash Plugin
		if (params.type == "flash") {
			createjs.Sound.registerPlugins([createjs.FlashAudioPlugin]);
		} else if (params.type == "html5") {
			createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);
		} else {
			createjs.Sound.registerPlugins([createjs.WebAudioPlugin, createjs.HTMLAudioPlugin, createjs.FlashAudioPlugin]);
		}

		if (!createjs.Sound.isReady()) {
			document.getElementById("error").style.display = "block";
			document.getElementById("content").style.display = "none";
			return;
		}

		var pluginStatus = document.getElementById("activePlugin");
		pluginStatus.innerHTML = "Active Plugin is " + createjs.Sound.activePlugin.toString();  // innerText does not work in FF

		// check if we are on a mobile device, as these currently require us to launch sound inside of a user event
		if (createjs.BrowserDetect.isIOS || createjs.BrowserDetect.isAndroid || createjs.BrowserDetect.isBlackberry) {
			document.getElementById("mobile").style.display = "block";
			document.getElementById("content").style.display = "none";
			return;
		}

		// store the DOM element so we do not have to keep looking it up
		displayStatus = document.getElementById("status");

		// Create a single item to load.
		var assetsPath = "../_assets/audio/";
		src = assetsPath + "M-GameBG.ogg";

		createjs.Sound.alternateExtensions = ["mp3"];	// add other extensions to try loading if the src file extension is not supported
		createjs.Sound.addEventListener("fileload", playSound); // add an event listener for when load is completed
		createjs.Sound.registerSound(src);  // register sound, which preloads by default

		setMessage("Waiting for load to complete.");  // letting the user know what's happening
	}

	function playSound(event) {
		soundInstance = createjs.Sound.play(event.src, {loop: -1, volume: 0.5});  // start playing the sound we just loaded, storing the playing instance
		initVisuals();
		initSoundTween();
	}

	function initSoundTween() {
		setMessage("Volume Down: 0.0");
		tween = createjs.Tween.get(soundInstance, {loop: true})
				.to({volume: 0.0}, 3 * baseTime)
				.wait(baseTime).call(setMessage, ["Volume Up: 0.5"])
				.to({volume: 0.5}, 3 * baseTime)
				.wait(baseTime).call(setMessage, ["Volume Up: 1.0"])
				.to({volume: 1.0}, 3 * baseTime)
				.wait(baseTime).call(setMessage, ["Volume Down: 0.5"])
				.to({volume: 0.5}, 3 * baseTime)
				.wait(baseTime).call(setMessage, ["Pan Right: 1.0"])
				.to({pan: 1}, 3 * baseTime)
				.wait(baseTime).call(setMessage, ["Pan Center: 0.0"])
				.to({pan: 0}, 3 * baseTime)
				.wait(baseTime).call(setMessage, ["Pan Left: -1.0"])
				.to({pan: -1}, 3 * baseTime)
				.wait(baseTime).call(setMessage, ["Pan Center: 0.0"])
				.to({pan: 0}, 3 * baseTime)
				.wait(baseTime).call(setMessage, ["Volume Down: 0.0, Pan Left: -1.0"])
				.to({pan: -1, volume: 0.0}, 3 * baseTime)
				.wait(baseTime).call(setMessage, ["Volume Up: 1.0, Pan Right: 1.0"])
				.to({pan: 1, volume: 1}, 6 * baseTime)
				.wait(baseTime).call(setMessage, ["Volume Down: 0.5, Pan Center: 0.0"])
				.to({pan: 0, volume: 0.5}, 3 * baseTime)
				.wait(baseTime).call(setMessage, ["Volume Down: 0.0"]);
	}

	function setMessage(message) {
		displayStatus.innerHTML = message;
	}

	function initVisuals() {
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
		stage.autoClear = true;

		volume = drawDial();
		volume.x = canvas.width / 3;
		var t = new createjs.Text("Volume", "20px Arial", "black");
		t.textAlign = "center";
		t.x = volume.x;
		t.y = canvas.height / 2 - 70;
		t.textBaseline = "alphabetic";
		stage.addChild(volume);
		stage.addChild(t);

		pan = drawDial();
		pan.x = canvas.width * 2 / 3;
		var t = new createjs.Text("Pan", "20px Arial", "black");
		t.textAlign = "center";
		t.x = pan.x;
		t.y = canvas.height / 2 - 70;
		t.textBaseline = "alphabetic";
		stage.addChild(pan);
		stage.addChild(t);

		createjs.Ticker.addEventListener("tick", handleTick);
	}

	function drawDial() {
		var s = new createjs.Shape();
		s.graphics.setStrokeStyle(5, 'round', 'round');
		s.graphics.beginStroke(('#000000'));
		s.graphics.beginFill("#777").drawCircle(0, 0, 50);
		s.graphics.endStroke();
		s.graphics.endFill();
		s.graphics.setStrokeStyle(1, 'round', 'round');
		s.graphics.beginStroke(('#000000'));
		s.graphics.moveTo(0, 0);
		s.graphics.lineTo(0, -50);

		s.graphics.endStroke();
		s.y = canvas.height / 2;
		return s;
	}

	function handleTick() {
		volume.rotation = (soundInstance.volume - 0.5) * 270;
		pan.rotation = soundInstance.pan * 135;

		stage.update();
	}
</script>

</body>
</html>
